<template>
  <div class="h-100 w-100 gzsjznfxyj" id="gzsjznfxyj">
    <div class="left_panel" ref="leftPanel">
      <div id="boxPanel" class="box-panel" ref="boxPanel">
        <el-row>
          <el-col :span="12">
            <div class="cont_panel">
              <div class="panel-title">
                <div class="text">
                  <b></b>疑似超能力生产企业
                  <i></i>
                </div>
              </div>
              <!-- <vae-echarts height="100%"  style="height: 100%" :options="right_mid_option"></vae-echarts> -->
              <vae-echarts @ck="cnl" :options="leftPie" height="100%" style="height: 100%"></vae-echarts>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cont_panel">
              <div class="panel-title">
                <div class="text">
                  <b></b>疑似超强度生产企业
                  <i></i>
                </div>
              </div>
              <!-- <div style=""> -->
              <vae-echarts @ck="cqd" height="100%" style="height:100%" :options="rightLine"></vae-echarts>
              <!-- </div> -->
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="cont_panel">
              <div class="panel-title">
                <div class="text">
                  <b></b>带班巡检监测预警
                  <i></i>
                </div>
              </div>
              <vae-echarts :options="midBar" @ck="zbDetail" height="100%" style="height: 100%"></vae-echarts>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cont_panel">
              <div class="panel-title">
                <div class="text">
                  <b></b>重大设备监测预警
                  <i></i>
                </div>
              </div>
              <vae-echarts :options="midRightBar" @ck="sbDetail" height="100%" style="height: 100%"></vae-echarts>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-row>
            <el-col :span="24">
              <div style="margin-left:0.5vw" class="panel-title">
                <div class="text">
                  <b></b>环境监测异常分析
                  <i></i>
                </div>
              </div>
            </el-col>
            <!-- <el-col :span="14">
              <div style="padding-left:1.2vw">
                <div
                  :class="itemTable.active==2?'buttonDiv  active':'buttonDiv'"
                  @click="tabChange(2)"
                >冲击地压</div>
                <div
                  :class="itemTable.active==1?'buttonDiv  active':'buttonDiv'"
                  @click="tabChange(1)"
                >水害</div>
                <div
                  :class="itemTable.active==0?'buttonDiv  active':'buttonDiv'"
                  @click="tabChange(0)"
                >瓦斯</div>
              </div>
            </el-col> -->
          </el-row>
          <div class="right_cont_panel">
            <el-row>
                <!-- <el-col :span="12">
                  <div class="panel-titles">
                    <b></b>动态预警
                    <i></i>
                  </div>
                  <div class="yj_main">
                    <div class="yj_content" :key="index" v-for="(item,index) in optionData.yjDatas">
                      <div class="lft_img"></div>
                      <div class="ct_panel" @click="showCurve(item)" style="cursor: pointer;">
                        <div class="title">{{item.name}}</div>
                        <div class="ctitle">时间：{{item.time}}</div>
                      </div>
                    </div>
                  </div>
                </el-col> -->
                <el-col :span="24">
                  <!-- <div class="panel-titles">
                    <b></b>异常分析
                    <i></i>
                  </div> -->
                  <!-- <div class="yj_scroll">
                    <vue-seamless-scroll
                      :data="optionData.ycDatas"
                      class="warp"
                      :class-option="classOption"
                    > -->
                      <div class="yj_main">
                        <div
                          class="yj_content"
                          :key="index"
                          v-for="(item,index) in optionData.ycDatas"
                          @click="ycfx(item)"
                        >
                          <div class="lft_img"></div>
                          <div class="ct_panel">
                            <div class="title">{{item.name}}</div>
                            <!-- <div class="ctitle" >时间：{{item.time}}</div> -->
                          </div>
                        </div>
                      </div>
                    <!-- </vue-seamless-scroll>
                  </div> -->
                </el-col>
            </el-row>
           <!-- <el-row>
                <el-col>
                  <div v-if="itemTable.active==2"  class="panel-titles"><b></b>异常分析<i></i></div>
                  <div v-if="itemTable.active==1"  class="panel-titles"><b></b>动态预警<i></i></div>
                      <div class="yj_mains">
                        <div
                          class="yj_contents"
                          :key="index"
                          v-for="(item,index) in optionData.ycDatas"
                        >
                          <div class="lft_imgs"></div>
                          <div class="ct_panel">
                            <div class="title">{{item.name}}</div>
                            <div class="ctitle" v-if="itemTable.active!=2">时间：{{item.time}}</div>
                          </div>
                        </div>
                      </div>
                </el-col>
           </el-row> -->
          </div>
        </el-row>
      </div>
    </div>
    <div class="mid_panel">
      <!-- <div class="mid_menu">
          <div class="menu_btm">
            <div class="menu_btn" v-for="(item,index) in btm_zhjc_menu_list" :key="index" @click="chooseBtmMenuBtn(item)" @mouseover="item.hover=true" @mouseout="item.hover=false">
                <div :class="{'menu_btn_l':!item.hover,'menu_btn_l_hover':item.hover || contentView==item.name}"></div>

                <div :class="{'menu_btn_m_hover':item.hover || contentView==item.name,'menu_btn_m':!item.hover}">{{item.title}}</div>

                <div :class="{'menu_btn_rend':!item.hover,'menu_btn_rend_hover':item.hover || contentView==item.name}"></div>

                <div class="x_line" v-if="index != btm_zhjc_menu_list.length-1"></div>
              </div>
            </div>
      </div>-->
    </div>
    <div class="right_panel" style="width: calc(30vw - 1vh);position: relative">
      <el-row>
        <el-col :span="12">
          <div class="panel-title">
            <div class="text">
              <b></b>双重预防分析预警
              <i></i>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div
            :class="itemTable.active1==2?'buttonDiv  active':'buttonDiv'"
            @click="itemTable.active1=2"
          >分析</div>
          <div
            :class="itemTable.active1==1?'buttonDiv  active':'buttonDiv'"
            @click="itemTable.active1=1"
          >统计</div>
        </el-col>
      </el-row>
      <div v-if="itemTable.active1==1" class="cont_panel">
        <el-row>
          <el-col :span="14">
            <el-row>
              <el-col :span="13">
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">重大风险</div>
                  <div class="num">
                    <!-- <span
                      style="color:red;cursor: pointer;"
                      @click="riskDetail({name:'重大风险',type:'risk'})"
                    >{{risk.zd}}</span>(条) -->
                    <span
                      style="color:red;cursor: pointer;"
                    >{{risk.zd}}</span>(条)
                  </div>
                </div>
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">较大风险</div>
                  <div class="num">
                    <!-- <span
                      style="color:orange;cursor: pointer;"
                      @click="riskDetail({name:'较大风险',type:'risk'})"
                    >{{risk.jd}}</span>(条) -->
                     <span
                      style="color:orange;cursor: pointer;"
                    >{{risk.jd}}</span>(条)
                  </div>
                </div>
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">一般风险</div>
                  <div class="num">
                    <!-- <span
                      style="color:yellow;cursor: pointer;"
                      @click="riskDetail({name:'一般风险',type:'risk'})"
                    >{{risk.yb}}</span>(条) -->
                     <span
                      style="color:yellow;cursor: pointer;"
                    >{{risk.yb}}</span>(条)
                  </div>
                </div>
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">低风险</div>
                  <div class="num">
                    <!-- <span
                      style="color:#409eff;cursor: pointer;"
                      @click="riskDetail({name:'低风险',type:'risk'})"
                    >{{risk.d}}</span>(条) -->
                    <span
                      style="color:#409eff;cursor: pointer;"
                    >{{risk.d}}</span>(条)
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="tranlte">
                  <div class="text-center">1268</div>
                  <div>巡检风险点</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">重大隐患</div>
                  <div class="num">
                    <!-- <span
                      style="color:red;cursor: pointer;"
                      @click="riskDetail({name:'重大隐患',type:'yinhuan'})"
                    >0</span>(条) -->
                    <span
                      style="color:red;cursor: pointer;"
                    >0</span>(条)
                  </div>
                </div>
                <div class="text-panel">
                  <div>
                    <img src="../../public/images/jdtq_03.png" alt />
                  </div>
                  <div class="text">一般隐患</div>
                  <div class="num">
                    <span
                      style="color:yellow;cursor: pointer;"
                      @click="risk_deatail({name:'隐患统计'})"
                    >{{risk.ybyh}}</span>(条)
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="10">
            <div class="img_cont_panel">
              <div class="panel-content">
                <el-row>
                  <el-col :span="12">
                    <el-row class="videoPanel">
                      <el-col :span="8" class="text-right">
                        <img src="../../public/images/video.png" alt />
                      </el-col>
                      <el-col :span="16" class="text-left">
                        <div class="text">整改中(条)</div>
                        <div class="num">0</div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="videoPanel">
                      <el-col :span="8" class="text-right">
                        <img src="../../public/images/video.png" alt />
                      </el-col>
                      <el-col :span="16" class="text-left">
                        <div class="text">超期整改(条)</div>
                        <div class="num">0</div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-row class="videoPanel">
                      <el-col :span="8" class="text-right">
                        <img src="../../public/images/video.png" alt />
                      </el-col>
                      <el-col :span="16" class="text-left">
                        <div class="text">整改中(条)</div>
                        <div class="num">{{risk.zg}}</div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="videoPanel">
                      <el-col :span="8" class="text-right">
                        <img src="../../public/images/video.png" alt />
                      </el-col>
                      <el-col :span="16" class="text-left">
                        <div class="text">超期整改(条)</div>
                        <div class="num">{{risk.cq}}</div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else class="right_panel_par">
        <vae-echarts :options="right_panel_par" height="100%" style="height: 100%"></vae-echarts>
      </div>
      <div class="cont_panel">
        <div class="panel-title">
          <div class="text">
            <b></b>煤矿事故风险分析
            <i></i>
          </div>
        </div>
        <el-row>
          <el-col :span="8">
            <div class="right_cont_panel">
              <div class="panel-titles">
                <b></b>历史事故统计
                <i></i>
              </div>
              <vae-echarts height="100%" style="height: 100%" :options="right_mid_option"></vae-echarts>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="right_cont_panel">
              <div class="c_body_sg" style="border-right: none">
                <div class="panel-titles">
                  <b></b>事故原因分析
                  <i></i>
                </div>
                <wordcloud
                  :data="optionData.sg_reason_words"
                  nameKey="name"
                  valueKey="value"
                  :color="myColors"
                  :showTooltip="false"
                  :wordPadding="1"
                  :drawOutOfBound="true"
                  :fontSize="[12,20]"
                  :margin="{top:0,right:0,bottom:0,left:0}"
                ></wordcloud>
              </div>
              <!-- <vae-echarts height="100%"  style="height: 100%" :options="right_mid_option"></vae-echarts> -->
            </div>
          </el-col>
          <el-col :span="8">
            <div class="right_cont_panel">
              <div class="c_body_sg" style="border-right: none">
                <div class="panel-titles">
                  <b></b>事故高频地点
                  <i></i>
                </div>
                <wordcloud
                  :data="optionData.sggp_reason_words"
                  nameKey="name"
                  valueKey="value"
                  :color="myColors"
                  :showTooltip="false"
                  :wordPadding="1"
                  :drawOutOfBound="true"
                  :fontSize="[12,20]"
                  :margin="{top:0,right:0,bottom:0,left:0}"
                ></wordcloud>
              </div>
              <!-- <vae-echarts height="100%"  style="height: 100%" :options="right_mid_option"></vae-echarts> -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="cont_panel_bottom">
        <div class="panel-title">
          <div class="text">
            <b></b>视频监控违规行为分析预警
            <i></i>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="yj_main">
              <div
                class="yj_content"
                :key="index"
                v-for="(item,index) in optionData.spyjData"
                @click="spyjClick(item)"
              >
                <div class="lft_img"></div>
                <div class="ct_panel">
                  <div class="title">{{item.name}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="img_content"
              @click="openClick()"
              style="height: 27vh;background-size:100% 100%;cursor:pointer;"
            >
              <img :src="srcs"  width="100%"  height="100%" alt="">
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <local-dialog
      :title="dia.diazbjc.title"
      width="80%"
      :visible.sync="dia.diazbjc.show"
      :close-on-click-modal="false"
      v-if="dia.diazbjc.show"
    >
      <zbjc :zbjcdata="dia.diazbjc.data"></zbjc>
    </local-dialog>
    <local-dialog
      :title="dia.diaybyh.title"
      width="80%"
      :visible.sync="dia.diaybyh.show"
      :close-on-click-modal="false"
      v-if="dia.diaybyh.show"
    >
      <ybyh :zbjcdata="dia.diaybyh.data"></ybyh>
    </local-dialog>
    <local-dialog
      :title="dia.diazdsb.title"
      width="80%"
      :visible.sync="dia.diazdsb.show"
      :close-on-click-modal="false"
      v-if="dia.diazdsb.show"
    >
      <zdsb :zbjcdata="dia.diazdsb.data"></zdsb>
    </local-dialog>
    <!-- 环境监测分析预警 -->
    <local-dialog
      :title="dia.diaCurve.title"
      width="80%"
      :visible.sync="dia.diaCurve.show"
      :close-on-click-modal="false"
      v-if="dia.diaCurve.show"
    >
      <dtyjcurve :ycfxcode="dia.diaCurve.data"></dtyjcurve>
    </local-dialog>
    <!-- 环境监测分析预警第二个表格弹窗 -->
    <local-dialog
      :title="dia.gaishan.title"
      width="90%"
      :visible.sync="dia.gaishan.show"
      :close-on-click-modal="false"
      v-if="dia.gaishan.show"
    >
      <dtyj :zbjcdata="dia.gaishan.data"></dtyj>
    </local-dialog>
    <local-dialog
      :title="diacqd.title"
      width="80%"
      :visible.sync="diacqd.show"
      :close-on-click-modal="false"
      v-if="diacqd.show"
    >
      <cqd :cqdcode="diacqd.cqdcode" :numcode="numcode"></cqd>
    </local-dialog>
    <local-dialog
      :title="diacnl.title"
      width="80%"
      :visible.sync="diacnl.show"
      :close-on-click-modal="false"
      v-if="diacnl.show"
    >
      <cnl :cnlcode="diacnl.cnlcode"></cnl>
    </local-dialog>
    <!-- 安全监测右边表格曲线弹框 -->
    <local-dialog
      :title="diaycfx.title"
      width="80%"
      :visible.sync="diaycfx.show"
      :close-on-click-modal="false"
      v-if="diaycfx.show"
    >
      <ycfx :ycfxcode="diaycfx.ycfxcode"></ycfx>
    </local-dialog>
  </div>
</template>

<script>
const pageName = "views_gzsjznfxyj";
import vueSeamlessScroll from "vue-seamless-scroll";
import zbjc from "./componets/zbjc.vue";
import zdsb from "./componets/zdsb.vue";
import ybyh from "./componets/ybyh.vue";
import dtyj from "./componets/dtyj.vue";
import cqd from "./cqd";
import cnl from "./cnl";
import ycfx from "./ycfx";
import dtyjcurve from "./componets/dtyjcurve.vue";
import wordcloud from "../components/WordCloud.vue";

export default {
  name: pageName,
  components: {
    wordcloud,
    zbjc,
    zdsb,
    dtyj,
    cqd,
    cnl,
    ycfx,
    ybyh,
    vueSeamlessScroll,
    dtyjcurve
  },
  data() {
    return {
      //滚动条速度
      classOption: {
        step: 0.2
      },
      //预警弹窗
      dia: {
        diazbjc: {
          show: false,
          title: "",
          data: {}
        },
        diaybyh:{
          show: false,
          title: "",
          data: {}
        },
        diazdsb: {
          show: false,
          title: "",
          data: {}
        },
        diaCurve: {
          show: false,
          title: "",
          data: {},
          option1: {},
          option2: {},
          option3: {}
        },
        gaishan: {
          show: false,
          title: "",
          data: {}
        }
      },
      diacqd: { title: "", show: false, cqdcode: "" },
      diacnl: { title: "", show: false, cnlcode: "" },
      diaycfx: { title: "", show: false, ycfxcode: "" },

      leftPie: {},
      rightLine: {},
      contentView: "sgzz",
      midBar: {},
      midRightBar: {},
      bottomLine: {},
      right_panel_par: {},
      right_mid_option: {},
      srcs:'/vae/images/vedio1.png',
      // bottomLine:{},
      myColors: [
        "#b87e1a",
        "#42ce22",
        "#1b8a7e",
        "#1f77b4",
        "#629fc9",
        "#94bedb",
        "#c9e0ef"
      ],
      srcData:['/vae/images/vedio1.png',
      '/vae/images/1.jpg',
      '/vae/images/2.jpg',
      '/vae/images/3.jpg',
      ],
      menu_btn_hover: false,
      btm_zhjc_menu_list: [
        { title: "煤矿", hover: false, name: "mk" },
        { title: "区域综合", hover: false, name: "gzsjznfxyj" },
        { title: "非煤矿山", hover: false, name: "sgzz" },
        { title: "危化", hover: false, name: "tsjc" },
        { title: "烟花爆竹", hover: false, name: "jdtqohyj" }
      ],
      menu_btn_hover: false,
      itemTable: {
        active: 1,
        active1: 1
      },
      risk:{},
      risks:{
          zd:63,jd:123,yb:186,d:251,ybyh:1104,zg:200,cq:229
      },
      heNanJson:{
        left_pie_data: [
          { name: "豫北分局(2家)", value: 2 },
          { name: "郑州分局(3家)", value: 3 },
          { name: "豫西分局(1家)", value: 1 },
          { name: "豫东分局(4家)", value: 4 },
          { name: "豫南分局(1家)", value: 1 }
        ],
        right_par_value:[40,32,20],
        mid_bar:[6,2,3],
        mid_right_bar:{
          data1:[112.0,20.9,23.0,22.2,16.6,56.7,],
          data2:[102.6,21.9,25.0,24.4,18.7,50.7,],
        },
      },
      optionData: {
        left_pie_data: [
            { name: "贵州(2家)", value: 2 },
            { name: "云南(3家)", value: 3 },
            { name: "河南(1家)", value: 1 },
            { name: "四川(4家)", value: 4 },
            { name: "陕西(1家)", value: 1 },
            { name: "山西(1家)", value: 1 }
        ],
        right_par_value:[50,42,30],
        mid_bar:[8,3,4],
        mid_right_bar:{
          data1:[122.0,24.9,27.0,23.2,25.6,76.7,],
          data2:[112.6,25.9,29.0,26.4,28.7,70.7,],
        },
        rignt_mid_data: [
          { name: "瓦斯事故", value: 9 },
          {
            name: "顶板事故",
            value: 31
          },
          { name: "机电事故", value: 12 },
          { name: "放炮事故", value: 2 },
          { name: "水灾事故", value: 6 },
          { name: "运输事故", value: 23 },
          { name: "其它事故", value: 10 },
          { name: null, value: 1 }
        ],
        spyjData: [
          {
            name: "河南省高山煤矿1205回采工作面 疑似出现发火隐患！",
            time: "2021-07-10至2021-07-11",
            id:0
          },
          {
            name: "河南省红岭公司1103回采工作面出现冒烟",
            id: 1,
            time: "2021-06-04至2021-06-05"
          },
          {
            name: "河南省顺和煤矿调度室连续2小时无人值守！",
            id: 2,
            time: "2010-12-21"
          },
          {
            name: "河南省枣园煤业视频监控连续8小时无领导下井！",
            time: "2010-12-21",
            id: 3,
          },
          // {
          //   name: "江西省龙门煤矿201运输大巷皮带违章乘人！",
          //   id: 4,
          //   time: "2010-12-21"
          // }
          // {
          //   name: "江西省停产丰阳煤矿7月2日下井人数较前一日增加150%!",
          //   time: "2010-12-21"
          // }
        ],
        yjData: [
          [
            {
              name: "河南云盖山一矿22206综采工作面甲烷浓度严重超限！",
              time: "2021-07-10至2021-07-11",
              mineName: "盖山一矿"
            },
            {
              name: "河南鹤煤六矿3002下顺槽掘进工作面甲烷连续2天超限17次！",
              id: "2",
              time: "2021-06-04至2021-06-05",
              mineName: "鹤煤六矿"
            },
            {
              name: "安徽省淮南矿业顾桥煤矿N3702运输巷瓦斯突出预警！",
              id: "3",
              time: "2010-12-21",
              mineName: "淮南矿业顾桥煤矿N3702运输巷"
            },
            {
              name: "安徽省淮南矿业谢桥矿2121(3)工作面T0甲烷浓度趋势预警！",
              time: "2010-12-21",
              mineName: "淮南矿业谢桥矿2121(3)工作面"
            }
          ],
          [
            {
              name:
                "河南义安煤矿主要含水层水位2050轨道车场联巷水位变化幅度达到8.5m/天！",
              time: "2021-07-10 09:00:01至2021-07-10 09:10:00"
            },
            {
              name:
                "河南永煤公司顺和矿主要含水层观1孔水压变化幅度达到163.31KPa！",
              id: "2",
              time: "2021-07-10 15:00:01至2021-07-10 15:10:00"
            },
            {
              name:
                "贵州省永滴水岩煤矿主要含水层水位变化幅度过大，含水层1#水文观测孔下降3m！",
              id: "3",
              time: "2021-07-01 10:00:00至2021-07-01 11:00:00"
            },
            {
              name: "陕西省玉华煤矿北八水仓口流量先对近七日均值增大42%！",
              time: "2021-03-25 14:23:00至2031-03-25 15:23:00"
            },
            {
              name:'安徽省潘三煤矿观2水位较上一日下降2.3m，-470水仓口西翼流量较上一日增加42%，监测值：39.81m³/h，疑似发生突水事故！',
              time:'2020-06-17 13:50:00至2020-06-17 14:50:00'
            }
          ],
          [
            {
              name: "河南云盖山一矿22206综采工作面甲烷浓度严重超限！",
              time: "2021-07-01至2021-07-01"
            },
            {
              name: "河南鹤煤六矿3002下顺槽掘进工作面甲烷连续2天超限17次！",
              id: "2",
              time: "2021-06-04至2021-06-05"
            },
            {
              name: "安徽省淮南矿业顾桥煤矿N3702运输巷瓦斯突出预警！",
              id: "3",
              time: "2010-12-21"
            },
            {
              name: "安徽省淮南矿业谢桥矿2121(3)工作面T0甲烷浓度趋势预警！",
              time: "2010-12-21"
            }
          ]
        ],
        ycData: [
          [
            {
              name:
                "国神集团大南湖一矿工作面回风隅角CO浓度呈现S型增长规律，疑出现采空区低温氧化。",
              time: "2021-7-10",
              id: "5",
              mineName: "大南湖一矿"
            },
            {
              name:
                "国神集团大南湖一矿工作面回风隅角CO浓度呈现J型增长规律，疑似出现采空区遗煤自燃。",
              time: "2021-7-10",
              id: "6",
              mineName: "大南湖一矿"
            },
            {
              name:
                "横山县众源煤矿二部皮带机头CO浓度瞬时突破1000ppm,之后迅速下降，疑似为爆破引发的CO浓度超限。",
              time: "2021-7-10",
              id: "7",
              mineName: "众源煤矿"
            },
            {
              name:
                "综合O2和CO浓度情况,内蒙古串草圪旦煤矿6106工作面，疑似出现因风流缓慢或漏风导致的CO超限。",
              time: "2021-7-10",
              id: "8",
              mineName: "内蒙古串草圪旦煤矿6106工作面"
            },
             
            {
              name:
                "陕西省隆德矿业215综采回风隅角一氧化碳超限报警，疑似采空区冒落影响。",
              id: "1",
              time: "2021-07-05 18:38:44",
              mineName: "隆德矿业"
            },
            {
              name:
                "河南省陈四楼煤矿-720清仓（开拓二队）回风流2#甲烷T2新激光甲烷超限报警，疑似传感器标校！",
              time: "2021-07-02 10:42:25",
              id: "4",
              mineName: "陈四楼煤矿"
            },
            {
              name:
                "河南省云盖山二矿-60m避难硐室甲烷进风侧外界甲烷超限，疑似停风！",
              id: "2",
              time: "2021-07-06 12:12:26",
              mineName: "云盖山二矿"
            },
             
          ],
          [
            {
              name:
                "河南义安煤矿主要含水层水位2050轨道车场联巷水位变化幅度达到8.5m/天！",
              time: "2021-07-01至2021-07-02",
              mineName: "义安煤矿"
            },
            {
              name:
                "河南永煤公司顺和矿主要含水层观1孔水压变化幅度达到163.31KPa！",
              id: "2",
              time: "2021-07-10至2021-07-11",
              mineName: "顺和矿"
            },
            {
              name:
                "贵州省永滴水岩煤矿主要含水层水位变化幅度过大，含水层1#水文观测孔下降3m！",
              id: "3",
              time: "2021-07-01",
              mineName: "永滴水岩煤矿"
            },
            {
              name: "陕西省玉华煤矿北八水仓口流量先对近七日均值增大42%！",
              time: "2010-3-25",
              mineName: "玉华煤矿"
            }
          ],
          [
            {
              name:
                "宁夏省任家庄煤矿2021年7月12日矿震能量报警32次，较七日均值增加23次，其中1342下山顶板矿震报警频繁，请重点关注！",
              time: "2021-07-12",
              mineName: "任家庄煤矿"
            },
            {
              name:
                "陕西省子长县双富煤矿2021年7月12日地应力报警102次，集中在1002掘进工作面，工作面100米范围内3条断层，疑似构造导致地应力变化！",
              id: "2",
              time: "2021-07-12",
              mineName: "双富煤矿"
            },
            {
              name:
                "云南省宝山镇宝达煤矿2021年7月12日1055掘进工作面地音监测报警12次，较上一日增加50%，工作面距离西采区1231回风巷38米，垂直间距25米，疑似巷道掘进扰动引起！",
              id: "3",
              time: "2021-7-12",
              mineName: "宝达煤矿"
            },
            {
              name:
                "山西省西曲煤矿矿2021年7月12日1421回采工作面当日平均矿震能变动幅度较5日均值超过20%！",
              time: "2021-7-12",
              mineName: "西曲煤矿"
            },
            {
              name:
                "2021年6月，山东省滕东生建煤矿2160工作面顶板离层位移监测报警7次，累计位移23cm，移速呈上升趋势，有冒顶风险，请及时处置！",
              time: "2021-7-12",
              mineName: "西曲煤矿"
            }
          ]
        ],
        yjDatas: [],
        ycDatas: [],
        tableData: [
          {
            city: "河南省",
            name: "陈四楼煤矿",
            maxValue: "2.5%",
            type: "瓦斯",
            status: "甲烷T2",
            reason: "疑似传感器标校"
          },
          {
            city: "河南省",
            name: "云盖山二矿",
            maxValue: "2.5%",
            type: "瓦斯",
            status: "甲烷",
            reason: "疑似停风"
          },
          {
            city: "陕西省",
            name: "隆德矿业",
            maxValue: "90ppm",
            type: "瓦斯",
            status: "co",
            reason: "疑似采空区冒落影响"
          },
          {
            city: "国神集团",
            name: "大南湖一矿",
            maxValue: "65ppm",
            type: "瓦斯",
            status: "co",
            reason: "疑似出现采空区低温氧化"
          }
        ],
        numcode:null,
        sg_reason_words: [
          // { name: "密闭", value: 5 },
          // { name: "巷道", value: 4 },
          // { name: "瓦斯", value: 4 },
          // { name: "积聚", value: 3 },
          // { name: "水巷", value: 3 },
          // { name: "突出", value: 3 },
          // { name: "上山", value: 3 },
          // { name: "启封", value: 3 },
          // { name: "联络", value: 2 },
          // { name: "冲垮", value: 2 },
          // { name: "工作面", value: 2 },
          // { name: "煤层", value: 2 },
          // { name: "大量", value: 2 },
          // { name: "应力", value: 2 },
          // { name: "引爆", value: 2 },
          // { name: "气体", value: 2 },
          // { name: "风门", value: 2 },
          // { name: "运输", value: 2 },
          // { name: "涌出", value: 2 },
          // { name: "形成", value: 2 }
        ],
        sggp_reason_words: [
          // {name:"煤仓",value:2},
          // {name:"采煤工作面",value:37},
          // {name:"井筒",value:5},
          // {name:"其他",value:20},
          // {name:"大巷",value:20},
          // {name:"掘进工作面",value:22},
        ]
      }
    };
  },
  created() {
    this.tabChange(0);
    this.initLeftPie(this.optionData.left_pie_data);
    this.initRightLine(this.optionData.right_par_value);
    this.initMidBar(this.optionData.mid_bar);
    this.initRightMidBar(this.optionData.mid_right_bar);
    this.initBottomLine();
    this.initRightPanelPar();
    this.initReson();
    this.initAdress();
    this.initRMidbar(this.optionData.rignt_mid_data);
    this.risk = this.risks
    // this.initData();
    // this.getData();
  },
  methods: {
    //双重分析柱状跳转
    shuangfen() {
        window.open("http://223.71.251.212:8889/LrMap/MapDisplay/Index", "_blank")
    },
    riskDetail(obj) {
      this.dia.gaishan.show = true;
      this.dia.gaishan.title = obj.name + "详情";
      this.dia.gaishan.data = Object.assign({}, obj);
    },
    risk_deatail(obj) {
      this.dia.diaybyh.show = true;
      this.dia.diaybyh.title = obj.name
      this.dia.diaybyh.data = Object.assign({}, obj);
    },
    // 动态预警曲线
    showCurve(row) {
      if (row.mineName == "盖山一矿") {
        this.dia.diaCurve.show = true;
        this.dia.diaCurve.title = row.mineName + "曲线";
        this.dia.diaCurve.data = Object.assign({}, row);
      }
      if (row.mineName == "鹤煤六矿") {
        this.dia.gaishan.show = true;
        this.dia.gaishan.title = row.mineName + "详情";
        this.dia.gaishan.data = Object.assign({}, row);
      }
      if (row.mineName == "淮南矿业顾桥煤矿N3702运输巷") {
        this.dia.diaCurve.show = true;
        this.dia.diaCurve.title = row.mineName + "曲线";
        this.dia.diaCurve.data = Object.assign({}, row);
      }
      if (row.mineName == "淮南矿业谢桥矿2121(3)工作面") {
        this.dia.diaCurve.show = true;
        this.dia.diaCurve.title = row.mineName + "曲线";
        this.dia.diaCurve.data = Object.assign({}, row);
      }
    },
    ycfx(item) {
      if (this.itemTable.active == 0) {
        this.diaycfx.title = item.mineName + "环境瓦斯历史曲线";
        this.diaycfx.ycfxcode = item.id;
        this.diaycfx.show = true;
      } else {
        return;
      }
    },
    // initSg() {
    //   this.request({
    //     url: "data/getData/2.6",
    //     method: "get"
    //   }).then(data => {
    //     this.optionData.sg_reason_words = data.data;
    //   });
    // },
    initReson() {
      this.request({
        url: "data/getData/2.7",
        method: "get"
      }).then(data => {
        this.optionData.sg_reason_words = data.data;
      });
    },
    initAdress() {
      this.request({
        url: "data/getData/2.8",
        method: "get"
      }).then(data => {
        this.optionData.sggp_reason_words = data.data;
      });
    },
    tabChange(type) {
      // debugger
      this.itemTable.active = type;
      this.optionData.yjDatas = this.optionData.yjData[type];
      if(type == 1){
        this.optionData.ycDatas = this.optionData.yjData[type];
      }else{
        this.optionData.ycDatas = this.optionData.ycData[type];
      }
    },
    spyjClick(item) {
      // debugger
      this.srcs = this.srcData[item.id]
      // window.open("vedio/test.html?cameraCode=14112300411316175503");
    },
    openClick(){
       window.open("vedio/test.html?cameraCode=14112300411316175503");
    },
    changeMap(item) {
      // console.log(123,item)
      if(!item){
        this.initLeftPie(this.heNanJson.left_pie_data);
        this.initRightLine(this.heNanJson.right_par_value);
        this.initMidBar(this.heNanJson.mid_bar);
        this.initRightMidBar(this.heNanJson.mid_right_bar);
        this.risk = {
          zd:53,jd:113,yb:156,d:151,ybyh:68,zg:25,cq:6
        }
      }else{
        this.initLeftPie(this.optionData.left_pie_data);
        this.initRightLine(this.optionData.right_par_value);
        this.initMidBar(this.optionData.mid_bar);
        this.initRightMidBar(this.optionData.mid_right_bar);
        this.risk = this.risks
      }
    },
    //值班人员预测报警弹窗
    zbDetail(val) {
      if (val.name == "带班领导巡检不达标") {
        this.dia.diazbjc.show = true;
        this.dia.diazbjc.title = val.name;
        this.dia.diazbjc.data = Object.assign({}, val);
      }
      if (val.name == "领导带班未巡检") {
        this.dia.diazbjc.show = true;
        this.dia.diazbjc.title = val.name;
        this.dia.diazbjc.data = Object.assign({}, val);
      }
      if (val.name == "疑似领导代班") {
        this.dia.diazbjc.show = true;
        this.dia.diazbjc.title = val.name;
        this.dia.diazbjc.data = Object.assign({}, val);
      }
    },
    sbDetail(val) {
      this.dia.diazdsb.show = true;
      this.dia.diazdsb.title = val.name;
      this.dia.diazdsb.data = Object.assign({}, val);
    },
    cqd(val) {
      console.log({val:val});
      
      this.diacqd.show = true;
      this.diacqd.title = val?.name + "详情";
      this.numcode=val.value;
      this.diacqd.cqdcode = val.name;
    },
    cnl(val) {
      console.log({ val: val });
      if (val.name == "贵州(2家)") {
        this.diacnl.title = val.name + "超能力生产预警详情";
        this.diacnl.show = true;
      } else {
        return;
      }
    },
    chooseBtmMenuBtn(item) {
      this.contentView = item.name;
    },
    initRightPanelPar() {
      this.right_panel_par = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["重大隐患", "一般隐患"],
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            data: [
              "采煤工作面",
              "掘进面",
              "瓦斯抽采场",
              "井底车场",
              "主井",
              "运输皮带",
              "石门",
              "回风巷",
              "辅运大巷",
              "变电所"
            ],
            // axisPointer: {
            //     type: 'shadow'
            // },
            axisLabel: {
              rotate: 30,
              // inside: true,
              textStyle: {
                fontSize: "12px",
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              // rotate:30,
              // inside: true,
              textStyle: {
                fontSize: "12px",
                color: "#fff"
              }
            }
          }
        ],
        grid: {
          left: "1%",
          // top:"-10%",
          right: "1%",
          bottom: "10%"
        },
        series: [
          {
            name: "重大隐患",
            type: "bar",
            itemStyle: {
              color: "#4fd7ef"
            },
            data: [
              122.0,
              24.9,
              27.0,
              23.2,
              25.6,
              76.7,
              35.6,
              62.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "一般隐患",
            type: "bar",
            data: [
              112.6,
              25.9,
              29.0,
              26.4,
              28.7,
              70.7,
              75.6,
              82.2,
              48.7,
              18.8,
              6.0,
              2.3
            ],
            itemStyle: {
              color: "#e41b77"
            }
          }
        ]
      };
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "tableBg";
      } else {
        return "";
      }
    },
    initData() {
      this.request({
        url: "data/getData/2.1",
        method: "get"
      }).then(({ data }) => {
        console.log(123, data);
        this.table1.data = data;
      });
    },
    initLeftPie(data) {
      this.leftPie = {
        tooltip: {
          trigger: "item",
          formatter: "{b0}: {c0}家"
        },
        title: {
          // text: '事故起数',
          left: "center",
          top: "bottom",
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
            align: "center",
            fontWeight: "normal"
          }
        },
        grid: {
          // top:"-3%",
          // left: '3%',
          // right: '4%',
          // bottom: '5%',
          // containLabel: true
        },
        color: [
          "#019cff",
          "#75eaf4",
          "#eeac7a",
          "#ec9399",
          "#9c83df",
          "#cdcf72",
          "#82d086",
          "#cfcfd0",
          "#29d0b6",
          "#29d0b6"
        ],
        series: [
          {
            name: "事故起数",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "50%"],
            hoverAnimation: true,
            silent: false,
            label: {
              show: true,
              // position: "top",
              color: "#fff"
            },
            labelLine: {
              show: true,
              smooth: 0.2,
              length: 6,
              length2: 5
            },
            data: data
          }
        ]
      };
    },
    initRightLine(data) {
      this.rightLine = {
        xAxis: {
          name: "煤炭/矿",
          type: "category",
          data: ["超员报警", "超时报警", "同水平多头面施工"],
          axisLabel: {
            rotate: 30,
            // inside: true,
            textStyle: {
              fontSize: "12px",
              color: "#fff"
            }
          }
        },
        grid: {
          left: "1%",
          top: "10%",
          right: "1%",
          bottom: "10%"
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#999"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 12,
            // showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff"
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" }
                ])
              }
            },
            data: data
          }
        ]
      };
    },
    initMidBar(data) {
      this.midBar = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // legend: {
        //     data: ['2011年', '2012年']
        // },
        grid: {
          top: "-3%",
          left: '-3%',
          right: "10%",
          bottom: "5%"
          // containLabel: true
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
          show: false
        },
        yAxis: {
          type: "category",
          data: [
            "疑似领导代班",
            "领导带班未巡检",
            "带班领导巡检不达标",
          ],
          axisLabel: {
            // rotate:30,
            // inside: true,
            textStyle: {
              fontSize: "12px",
              color: "#fff"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 16,
            label: {
              show: true,
              position: "right",
              formatter: '{c}座', // 这里是数据展示的时候显示的数据
              color: "#fff"
            },
            data: data
          }
        ]
      };
    },
    initRightMidBar(data) {
      this.midRightBar = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["异常预警", "监测预警"],
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            data: [
              "主通风机",
              "提升设备",
              "运输设备",
              "排水设备",
              "压风设备",
              "供电设备"
            ],
            // axisPointer: {
            //     type: 'shadow'
            // },
            axisLabel: {
              rotate: 30,
              // inside: true,
              textStyle: {
                fontSize: "12px",
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              // rotate:30,
              // inside: true,
              textStyle: {
                fontSize: "12px",
                color: "#fff"
              }
            }
          }
        ],
        grid: {
          left: "1%",
          // top:"-10%",
          right: "1%",
          bottom: "10%"
        },
        series: [
          {
            name: "异常预警",
            type: "bar",
            itemStyle: {
              color: "#4fd7ef"
            },
            data: data.data1
          },
          {
            name: "监测预警",
            type: "bar",
            data: data.data2,
            itemStyle: {
              color: "#e41b77"
            }
          }
        ]
      };
    },
    initBottomLine() {
      this.bottomLine = {
        title: {
          text: "甲烷、CO报警趋势统计",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        tooltip: {
          trigger: "axis",

          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c"
          }
        },
        grid: {
          top: "15%"
          // bottom:"8%",
        },
        xAxis: [
          {
            type: "category",
            data: ["6/24", "6/25", "6/26", "6/27", "6/28", "6/29"],
            axisLine: {
              lineStyle: {
                color: "#0173DA"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                color: "#FFFFFF"
              },
              // 默认x轴字体大小
              fontSize: 12
              // margin:文字到x轴的距离
            },
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#0173DA"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0173DA"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#FFFFFF"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#0173DA"
              }
            }
          },
          {
            type: "value",
            position: "right",
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#0173DA"
              },
              formatter: "{value}"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0173DA"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: "line",
            data: [10, 10, 30, 12, 15, 3],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: "#00DAFF"
            },
            itemStyle: {
              normal: {
                color: "#00DAFF",
                borderColor: "#00DAFF"
              }
            }
          }
        ]
      };
    },
    initRMidbar(data) {
      this.right_mid_option = {
        tooltip: {
          trigger: "item",
          formatter: "{b0}: {c0}起"
        },
        title: {
          // text: '历史事故统计',
          left: "center",
          top: "bottom",
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
            align: "center",
            fontWeight: "normal"
          }
        },
        grid: {
          top: "-10%",
          // left: '3%',
          // right: '4%',
          // bottom: '5%',
          // containLabel: true
        },
        color: [
          "#019cff",
          "#75eaf4",
          "#eeac7a",
          "#ec9399",
          "#9c83df",
          "#cdcf72",
          "#82d086",
          "#cfcfd0",
          "#29d0b6",
          "#29d0b6"
        ],
        series: [
          {
            name: "事故起数",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "40%"],
            hoverAnimation: true,
            silent: false,
            // label: {
            //   normal: {
            //     show: true,
            //     textStyle: {
            //       fontSize: this.standSize / 160,
            //     },
            //   },
            // },
            labelLine: {
              show: true,
              smooth: 0.3,
              length: 4,
              length2: 5
            },
            data: data
          }
        ]
      };
    },
    _pie() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgb(3,56,92)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        }
      }
      return dataArr;
    },
    getData() {
      this.request({
        url: "data/getData/1.5",
        method: "get"
      }).then(({ data }) => {
        this.data = data;
      });
    }
  },
  mounted() {}
};
</script>
<style scoped lang="less">
.gzsjznfxyj {
  .left_panel {
    width: 30vw !important;
  }
  .mid_panel {
    width: 37vw !important;
  }
  .right_panel {
    width: 30vw !important;
  }
}
.full-h {
  height: 100%;
}
.full-w {
  width: 100%;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.buttonDiv {
  width: 26%;
  height: 2.5vh;
  background: url("../../public/images/Tai_di.png") no-repeat;
  background-size: 100% 100%;
  color: #23edff;
  text-align: center;
  float: right;
  margin-top: 0.5vh;
  line-height: 2.5vh;
  margin-right: 0.2vw;
  cursor: pointer;
}
.buttonDiv.active {
  background: url("../../public/images/Tai_dian.png") no-repeat;
  background-size: 100% 100%;
}

.left_panel {
  background: url("../../public/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 1vh;
  box-sizing: border-box;
  .box-panel {
    height: 100vh;
    .cont_panel {
      height: 25vh;
      // overflow: hidden;
      margin: 0.9vh;
      color: #fff;
      background: url("/vae/images/tiao-1.png") no-repeat;
      background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
      -o-background-size: cover;
      background-position: center 0;
    }
    // .cont_panel:hover{
    //   background: url("/vae/images/tiao-2.png") no-repeat;
    //   background-size: 100% 100%;
    //   -webkit-background-size: 100% 100%;
    //   -o-background-size: cover;
    //   background-position: center 0;
    // }
    .panel-title {
      background: url("../../public/images/Tai_icon.png") no-repeat;
      background-size: initial;
      padding-left: 1.6vw;
      margin: 0.5vh 0;
      background-position-y: 0.2vh;
      .text {
        color: #1fdffe;
        font-size: 2vh;
        line-height: 2vh;
        padding: 0.4vh 0 0.2vh 0.5vh;
      }
    }
  }
  .yj_mains {
    height: 2vh;
    overflow: auto;
  }
  .yj_contents {
    height: 8vh;
    margin-top: 0.1vh;
    color: #fff;
    background: url("/vae/images/tiao-1.png") no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
    /deep/.lft_imgs {
      height: 6vh;
      width: 6vh;
      margin: 1vh 0;
      background: url("/vae/images/jingdeng.gif") no-repeat;
      background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
      -o-background-size: cover;
      background-position: center 0;
      float: left;
    }
    .yj_contents.ct_panel {
      height: 6vh;
      width: calc(100% - 1vh);
      float: left;
    }

    .ct_panel .title {
      color: #21ecf9;
      font-size: 0.6vw;
      padding: 1.5vh 0;
    }
    .ct_panel .ctitle {
      color: #fff;
      font-size: 0.4vw;
    }
  }
  .yj_content:hover {
    background: url("/vae/images/tiao-2.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
  }
  .yj_main {
    height: 27vh;
    overflow: auto;
  }
  .yj_content {
    height: 5vh;
    margin-top: 0.1vh;
    color: #fff;
    background: url("/vae/images/tiao-1.png") no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
    /deep/.lft_img {
      height: 4vh;
      width: 4vh;
      margin: 0.5vh 0;
      background: url("/vae/images/jingdeng.gif") no-repeat;
      background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
      -o-background-size: cover;
      background-position: center 0;
      float: left;
    }
    .yj_content.ct_panel {
      height: 6vh;
      width: calc(100% - 2vh);
      float: left;
    }

    .ct_panel .title {
      color: #21ecf9;
      font-size: 0.6vw;
      padding: 1vh 0;
    }
    .ct_panel .ctitle {
      color: #fff;
      font-size: 0.4vw;
    }
  }
  .yj_content:hover {
    background: url("/vae/images/tiao-2.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
  }
}
.mid_panel {
  .menu_btm {
    position: absolute;
    z-index: 99;
    height: 2vh;
    width: 51vw;
    left: 24.5vw;
    bottom: 8vh;
    text-align: center;
  }
}
.right_cont_panel {
  height: 25vh;
  margin: 0.9vh;
  color: #fff;
  background: url("/vae/images/tiao-1.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  /deep/ .panel-content {
    margin-top: 0.5vh;
    .mapTable {
      overflow: auto;
      height: 23vh;
      background: #091c68;
      color: #fff;
      th {
        border-bottom: 0;
        background: transparent;
        .cell {
          color: #fff;
        }
      }

      tr {
        background: transparent;
        font-size: 0.6vw;
        td {
          border-bottom: 1px solid transparent;
          padding: 0.2vh 0;
        }
      }
      tr.tableBg {
        background: #030e51;
      }
      tr:hover {
        background: url("../../public/images/Tai_tiao.png") no-repeat;
        background-size: 100% 100%;
        td {
          background: transparent;
        }
      }
    }
    .el-table::before {
      background: transparent;
    }
  }
}
.right_panel {
  background: url("../../public/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  background-size: 100% 100%;
  padding: 0 1vh !important;
  padding-top: 3vh !important;
  box-sizing: border-box;
  .yj_main {
    height: 27vh;
    overflow: auto;
  }
  .yj_content {
    height: 6vh;
    margin-top: 0.6vh;
    color: #fff;
    background: url("/vae/images/tiao-1.png") no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
    /deep/.lft_img {
      height: 4vh;
      width: 4vh;
      margin: 0.5vh 0;
      background: url("/vae/images/jingdeng.gif") no-repeat;
      background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
      -o-background-size: cover;
      background-position: center 0;
      float: left;
    }
    .yj_content.ct_panel {
      height: 6vh;
      width: calc(100% - 2vh);
      float: left;
    }

    .ct_panel .title {
      color: #21ecf9;
      font-size: 0.6vw;
      padding: 1vh 0;
    }
    .ct_panel .ctitle {
      color: #fff;
      font-size: 0.4vw;
    }
  }
  .yj_content:hover {
    background: url("/vae/images/tiao-2.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
  }
  .right_panel_par {
    height: 21vh;
    width: 100%;
  }
  .img_cont_panel {
    height: 18vh;
    margin: 0.9vh;
    color: #fff;
    background: url("/vae/images/tiao-1.png") no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
    .videoPanel {
      margin-top: 2.5vh;
      // margin-left: 0.1vw;
      img {
        width: 95%;
      }
      .text {
        color: #fff;
        font-size: 1.2vh;
        padding-bottom: 0.3vh;
        padding-top: 0.5vh;
        padding-left: 0.1vw;
      }
      .num {
        color: #40e6fe;
        font-size: 1.4vh;
        font-family: "黑体";
        padding-left: 0.5vw;
      }
    }
  }
  .cont_panel {
    // height: 20vh;
    // margin:0.9vh;
    color: #fff;
    // background: url("/vae/images/tiao-1.png") no-repeat;
    // background-size: 100% 100%;
    // -webkit-background-size: 100% 100%;
    // -o-background-size: cover;
    // background-position: center 0;
    .tranlte {
      width: 100%;
      margin-top: 9vh;
      display: inline-block;
      font-size: 0.1vw;
      // line-height: 24vh;
    }
    .num {
      color: #40e6fe;
      font-size: 1.4vh;
      font-family: "黑体";
      padding-left: 0.5vw;
    }
  }
}
.cont_panel {
  // height: 20vh;
  // margin:0.9vh;
  color: #fff;
  // background: url("/vae/images/tiao-1.png") no-repeat;
  // background-size: 100% 100%;
  // -webkit-background-size: 100% 100%;
  // -o-background-size: cover;
  // background-position: center 0;
  .tranlte {
    width: 100%;
    margin-top: 10vh;
    display: inline-block;
    font-size: 0.1vw;
    // line-height: 24vh;
  }
  .text-panel {
    margin-top: 1vh;
    float: left;
    img {
      width: 4vw;
      height: 4vh;
    }
    .text {
      color: #fff;
      font-size: 1vh;
      padding-bottom: 0.1vh;
      padding-left: 1vw;
      text-align: left;
    }
    .num {
      color: #40e6fe;
      font-size: 1.6vh;
      font-family: "黑体";
      // padding-left: 1vw;
      text-align: center;
      span {
        color: #fff;
        font-size: 1.4vh;
      }
    }
  }
}
.panel-title {
  background: url("../../public/images/Tai_icon.png") no-repeat;
  background-size: initial;
  padding-left: 1.6vw;
  margin: 0.5vh 0;
  background-position-y: 0.2vh;
  .text {
    color: #1fdffe;
    font-size: 2vh;
    line-height: 2vh;
    padding: 0.4vh 0 0.2vh 0.5vh;
  }
}
.panel-titles {
  width: 100%;
  height: 3vh;
  font-size: 1.6vh;
  line-height: 3vh;
  color: #fff;
  text-align: center;
}
.panel-titles b {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/zuo.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.panel-titles i {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/you.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.panel-content {
  // height: calc(50% - 2vh);
  margin-top: 2vh;
}
.panleBG_panel {
  margin: 0 auto;
  height: 8vh;
  background: url("../../public/images/rightBG.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 1vh;
  .ling {
    width: 2.2vw;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    float: left;
    img {
      padding-top: 2vh;
    }
  }
  .text {
    color: #fff;
    font-size: 1.4vh;
    padding-top: 0.8vh;
    line-height: 2vh;
  }
  .num {
    color: #40e6fe;
    font-size: 1.2vh;
    font-family: "黑体";
    line-height: 1.8vh;
  }
  .time {
    font-size: 1vh;
    color: #84a9ff;
  }
}
</style>
